import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return new MaterialApp(

      title: 'title',

      home: new HomePage(),
    );
  }
}


class HomePage extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {

    return new HomePageState();
  }
}


class HomePageState extends State<HomePage>{

  int _selectIndex = 0;

  void _onItemTapped(int index){


    //调用这个方法进行刷新页面-不调用不会刷新
    setState(() {

      _selectIndex = index;

    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(

      appBar: new AppBar(title: new Text('BottomNavigationBar'),),

      body: new Scaffold(

          bottomNavigationBar: new BottomNavigationBar(

            items:<BottomNavigationBarItem>[

              new BottomNavigationBarItem(icon: new Icon(Icons.directions_bike),title: new Text('1')),

              new BottomNavigationBarItem(icon: new Icon(Icons.directions_bike),title: new Text('2')),

              new BottomNavigationBarItem(icon: new Icon(Icons.directions_bike),title: new Text('3')),

              new BottomNavigationBarItem(icon: new Icon(Icons.directions_bike),title: new Text('4')),

            ],

            currentIndex: _selectIndex,
            onTap: _onItemTapped,

            //通过 fixedColor 设置选中的 item 颜色
            // 不设置这条，选中的item会变大 少于四个没有变化
            type: BottomNavigationBarType.fixed,

            //不添加颜色有时变白不知道什么情况
            unselectedItemColor: Colors.black,
            selectedItemColor: Colors.blue,

          ),

        body: new Center(

          child: new Text('$_selectIndex',style: new TextStyle(fontSize: 30),),
        ),



      ),

    );
  }
}




